<template>
  <div>
    <template v-for="(navMenu,index) in navMenus">
      <el-menu-item v-if="navMenu.child==null" :index="navMenu.path" :key='index'>
         <i style="margin-right:5px;" v-if="navMenu.icon">
           <template v-if="activeIndex!=navMenu.path">
              <img :src="navMenu.icon" alt="">
           </template>
           <template v-if="activeIndex==navMenu.path">
              <img :src="navMenu.icon2" alt="">
           </template>
         </i>
        <span slot="title">{{navMenu.name}}</span>
      </el-menu-item>
      <el-submenu v-if="navMenu.child" :index="navMenu.name" :key='index'>
        <template slot="title">
          <i style="margin-right:5px;" v-if="navMenu.icon">
            <template v-if="activeSub!=navMenu.name">
              <img :src="navMenu.icon" alt="">
           </template>
           <template v-if="activeSub==navMenu.name">
              <img :src="navMenu.icon2" alt="">
           </template>
          </i>
          <span> {{navMenu.name}}</span>
        </template>
        <NavMenu :navMenus="navMenu.child"></NavMenu>
      </el-submenu>
    </template>>
  <!-- <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
    <el-menu-item-group>
      <template slot="title">分组一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">选项4</template>
      <el-menu-item index="1-4-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible2: false
    }
  },
  props: ['title'],
  methods: {

  },
  created () {
    this.name = this.$route.name.split('-')[1]
  }
}
</script>

<style lang='scss' scoped>
.list {
  &-titlebox {
    position: relative;
    margin: 40px 0;
    padding: 0 100px 0 20px;
  }
  &-title {
    font-size: 40px;
    color: #e91e63;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    &-type {
    font-size:14px;
    padding: 5px 10px;
    color:#333;
    border:1px solid #333;
    &:hover {
      cursor: pointer;
      border-color:#e91e63;
      background: #e91e63;
      color: #fff;
    }
    }
  }
}
</style>

